<style lang='less'>
.grid-card{
    height: auto;
    .grid-group {
        display: inline-block;
        //float: left;
        margin-top: 20px;
        margin-right: 20px;
    }
    .grid-group>.grid-item {
        border-radius:30%;
        padding: 12px;
        margin: 12px;
        cursor: pointer;
        height: 100px;
        width: 100px;
        
        text-align: center;
        display: inline-block;
        margin-right: 10px;
        border-radius: 3px;
        
        [class^="icon-"], [class*=" icon-"]{
        font-size: 28px;
        }
        p{
            margin: 10px 0px;
        }
    }
    .grid-group>.grid-item:hover {
      background: #3b91ff !important;
      color:#ffffff !important;
    }
}
</style>
<template>
  <div class="grid-card">
    <div class="grid-group">
        <div class="grid-item" v-for="(item,index) in sysappsinfo" :key="index" :style="itemStyle" @click="toApp('contact')">
          <p><i :class="itemClass"></i></p>
          <p>{{index}}-{{item.app_name}}</p>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    sysappsinfo:{
      //type:null,
      //default:"1"
      // deafult:function () {
      //   return { message: 'hello' }
      // }
    }
  },
  data() {
    return {
      SysApps:this.sysappsinfo,
      itemStyle:{
        background: '#f0f6ff',
        color:'#767676'
      },
      itemClass:'icon-paper-'+'clip'
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
       log(this.SysApps)
    },
    toApp(e){
      //this.$router.push('/sysapps/abc')
      console.log(e)
     
    }
  },
  computed: {
    
  }
}
</script>